<!DOCTYPE html>
<html>
  <head>
    <title>
      HanapIn
    </title>
    <link rel="stylesheet" href="src/css/normalize.css">
    <!--
      <link rel="shortcut icon" href="src/img/favicon.png">
      <link rel="stylesheet" href="src/styles/main.css">
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
      body {
        background-color: #dedede;
        overflow-y: hidden;
      }
    
      .hi-header {
        background-color: #c00000;
        background-image: url("src/img/header-logo.png");
        background-repeat: no-repeat;
        width: 100%;
        height: 40px;
        z-index: 3000;
        position: fixed;
        top: 0;
      }
      
      .hi-header button {
        width: 40px;
        height: 40px;
        border: 0;
        background-color: #c00000;
        transition: background-color .1s linear;
        float: right;
        border-left: 1px solid #f00000;
      }
      
      .hi-header button:hover {
        background-color: #a00000;
        transition: background-color .1s linear;
      }
      
      .hi-nav {
        background-color: #fafafa;
        width: 100%;
        height: 80px;
        z-index: 3000;
        position: fixed;
        top: 40px;
      }
      
      .hi-nav button {
        width: 80px;
        height: 80px;
        color: #c00000;
        font-family: century gothic;
        font-size: 6pt;
        text-transform: uppercase;
        line-height: 140px;
      }
      
      .hi-nav .left {
        float: left;
        font-size: 0;
      }
      
      .hi-nav .right {
        float: right;
        font-size: 0;
      }
      
      .hi-nav .left button {
        border: 0;
        background-color: #fafafa;
        transition: background-color .1s linear;
        border-right: 1px solid rgba(192, 0, 0, 0.25);
      }
      
      .hi-nav .left button:hover {
        background-color: #eaeaea;
        transition: background-color .1s linear;
      }
      
      .hi-nav .right button {
        border: 0;
        background-color: #fafafa;
        transition: background-color .1s linear;
        border-left: 1px solid rgba(192, 0, 0, 0.25);
      }
      
      .hi-nav .right button:hover {
        background-color: #eaeaea;
        transition: background-color .1s linear;
      }
      
      .hi-footer {
        z-index: 4000;
        background-color: #c00000;
        height: 20px;
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        color: #fff;
        font-size: 10pt; 
      }
      
      .hi-canvas {
        width: 100%;
        height: 500px;
        z-index: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div class="hi-header">
      <button style="background-image: url('src/img/header-exit.png');"></button>
      <button style="background-image: url('src/img/header-question.png');"></button>
      <button style="background-image: url('src/img/header-info.png');"></button>
      
    </div>
    
    <div class="hi-nav">
      <div class="left">
        <button id="book-sections" style="background-image: url('src/img/nav-section.png');">Book Sections</button>
        <button style="background-image: url('src/img/nav-wifi.png');">WiFi Routers</button>
        <button style="background-image: url('src/img/nav-poi.png');">POI</button>
        <button style="background-image: url('src/img/nav-noti.png');">Notifications</button>
      </div>
      
      <div class="right">
        <button style="background-image: url('src/img/nav-config.png');">Settings</button>
      </div>
    </div>
    
    <div class="hi-footer">
       x: <span id="xcoor"></span>, y: <span id="ycoor"></span>
       lastx: <span id="xnalast"></span>, lasty: <span id="ynalast"></span>
       startx: <span id="startex"></span>, starty: <span id="startey"></span>
    </div>
    
    <div class="hi-modal-wrapper">
      <div class="hi-modal">

      </div>
    </div>
    
    <div class="hi-options">
      <button onclick="addSection();">
        <div style="background-image: url('src/img/opt-section.png');">
        
        </div>
        <span>
          Book Section
        </span>
      </button>
      
      <button>
        <div style="background-image: url('src/img/opt-wifi.png');">
        
        </div>
        <span>
          WiFI Router
        </span>
      </button>
      
      <button onclick="addPOI();">
        <div style="background-image: url('src/img/opt-poi.png');">
        
        </div>
        <span>
          Point of Interest
        </span>
      </button>
      
      <button class="btn-bottom">
        <div style="background-image: url('src/img/opt-noti.png');">
        
        </div>
        <span>
          Notification
        </span>
      </button>
      
      <button class="btn-bottom">
        <div style="background-image: url('src/img/opt-find.png');">
        
        </div>
        <span>
          Find...
        </span>
      </button>
      
      <button>
        <div style="background-image: url('src/img/opt-zoin.png');">
        
        </div>
        <span>
          Zoom In
        </span>
      </button>

      <button>
        <div style="background-image: url('src/img/opt-zout.png');">
        
        </div>
        <span>
          Zoom Out
        </span>
      </button>
    </div>
    
    <div class="hi-tags-container">

    </div>
    
    <div class="hi-canvas" id="hi-map-wrapper">
      <canvas id="hi-map" width="5000" height="5000">
      
      </canvas>
    </div>
  </body>
  
  <script>
    var xcoor = document.getElementById("xcoor");
    var ycoor = document.getElementById("ycoor");
    var xnalast = document.getElementById("xnalast");
    var ynalast = document.getElementById("ynalast");
    var startex = document.getElementById("startex");
    var startey = document.getElementById("startey");
    
    var tags = [];
    
    var options = document.getElementsByClassName("hi-options")[0];
    
    var map = document.getElementById("hi-map");
    var context = map.getContext("2d");
    
    var mouse = {x: 0, y: 0}; //make an object to hold mouse position
    var startCoords = {x: 0, y: 0};
    var last = {x: 0, y: 0};
    var isDown = false;
    //var scale = 2;
    
    function render() {
      'use strict';
      context.beginPath();
      context.save();
      context.setTransform(1, 0, 0, 1, 0, 0);
      context.fillStyle="#dedede";
      context.fillRect(0, 0, map.width, map.height); //fill the background. color is default black
      /*
      ctx.arc(mouse.x, mouse.y, 50, 0, 6.28, false);//draw the circle
      */
      context.restore();
      context.save();
      context.clip();//call the clip method so the next render is clipped in last path
      context.closePath();
      context.restore();
      
      context.fillStyle="#000";
      context.fillRect(100, 100, 500, 500);
      
      for (var x = 0.5; x < 5000; x += 20) {
        context.moveTo(x, 0);
        context.lineTo(x, 5000);
      }

      for (var y = 0.5; y < 5000; y += 20) {
        context.moveTo(0, y);
        context.lineTo(5000, y);
      }
    
      context.strokeStyle = "#bbb";
      context.stroke();
      //context.drawImage(img, 200, 200, 200, 200);
    }
    setInterval(render, 100);// set the animation into motion
    
    map.onmousemove = function (e) {
      'use strict';
      var xVal = e.pageX - this.offsetLeft,
          yVal = e.pageY - this.offsetTop;
      mouse = {x: e.pageX,
               y: e.pageY};
      xcoor.innerHTML = e.pageX - this.offsetLeft - last.x;
      ycoor.innerHTML = e.pageY - this.offsetTop - last.y;
      xnalast.innerHTML = last.x;
      ynalast.innerHTML = last.y;
      startex.innerHTML = e.pageX;
      startey.innerHTML = e.pageY;
      if (isDown) {
        context.setTransform(1, 0, 0, 1, xVal - startCoords.x, yVal - startCoords.y);
        for (var i = 0; i < tags.length ; i++) {
          //alert(tags[i].offsetLeft);
          
          //startex.innerHTML = parseFloat(tags[i].style.left) + (e.pageX - this.offsetLeft - startCoords.x);
          //startey.innerHTML = parseFloat(tags[i].style.top) + (e.pageY - this.offsetTop - startCoords.y);
          //xcoor.innerHTML = parseFloat(tags[i].style.top) - yVal - startCoords.y;
          //tags[i].style.top = parseFloat(tags[i].style.top) + (parseFloat(tags[i].style.top) + e.pageY - tags[i].offsetTop - startCoords.y) + "px";
          //tags[i].style.left = parseFloat(tags[i].style.left) + (parseFloat(tags[i].style.left) + e.pageX - tags[i].offsetLeft - startCoords.x) + "px";
        };
      }
    };

    map.onmousedown = function (e) {
        'use strict';
        options.style.left = "-5000px";
        options.style.top = "-5000px";
        isDown = true;
        e = e || window.event;
        var button;
        if (e.which == null) {
          button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
        } else {
          button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
        }
        if (button == "left") {
          wrapper.style.cursor = "grab";
        }
        startCoords = {x: e.pageX - this.offsetLeft - last.x,
                       y: e.pageY - this.offsetTop - last.y};
    };

    map.onmouseup = function (e) {
      'use strict';
      isDown = false;
      wrapper.style.cursor = "default";
      last = {x: e.pageX - this.offsetLeft - startCoords.x,
              y: e.pageY - this.offsetTop - startCoords.y};
      xcoor.innerHTML = e.pageX - this.offsetLeft - last.x;
      ycoor.innerHTML = e.pageY - this.offsetTop - last.y;
    };
    
    /*
    context.fillRect(40, 180, 1000, 1000);
    */
    
    var wrapper = document.getElementById("hi-map-wrapper");
    wrapper.style.height = window.innerHeight + "px";
    
    wrapper.addEventListener('contextmenu', function(e) {
      e.preventDefault();
      mouse = {x: e.pageX, y: e.pageY};
      var x = e.pageX - this.offsetLeft - last.x;
      var y = e.pageY - this.offsetTop - last.y;
      if (x <= 5000 && x >= 0 && y <= 5000 & y >= 0) {
        options.style.left = mouse.x + "px";
        options.style.top = mouse.y + "px";
      }
      return false;
    }, false);
    
    var modalwrapper = document.getElementsByClassName("hi-modal-wrapper")[0];
    document.getElementById("book-sections").onclick = function (e) {
      modalwrapper.style.top = "0px";
      modalwrapper.style.left = "0px";
    }
    
    modalwrapper.onclick = function (e) {
      modalwrapper.style.top = "-5000px";
      modalwrapper.style.left = "-5000px";
    }
    
    var tagscontainer = document.getElementsByClassName("hi-tags-container")[0];
    
    function addSection() {
      options.style.left = "-5000px";
      options.style.top = "-5000px";
      tagscontainer.innerHTML += "<div style='left:" + mouse.x +"px; top:" + mouse.y + "px;' class='hi-tag tag-section'></div>";
      tags = document.getElementsByClassName("hi-tag");
    }
    
    function addPOI() {
      options.style.left = "-5000px";
      options.style.top = "-5000px";
      tagscontainer.innerHTML += "<div style='left:" + mouse.x +"px; top:" + mouse.y + "px;' class='hi-tag tag-poi'></div>";
      tags = document.getElementsByClassName("hi-tag");
    }
  </script>

  <style>
    .hi-tags-container {
      z-index: 2000;
      left: 0;
      top: 0;
      position: absolute;
    }
    
    .hi-tag {
      width: 20px;
      height: 20px;
      position: absolute;
      cursor: pointer;
    }
    
    .tag-section {
      background-image: url('src/img/tag-section.png');
    }
    
    .tag-poi {
      background-image: url('src/img/tag-poi.png');
    }
  
    .hi-modal-wrapper {
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top: -5000px;
      left: -5000px;
    }
    
    .hi-modal {
      width: 60%;
      height: 400px;
      position: relative;
      top: 160px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background-color: #c00000;
    }
  
    .hi-options {
      background-color: #fafafa;
      width: 150px;
      font-size: 10pt;
      font-family: century gothic;
      border: 1px solid rgba(192, 0, 0, 0.25);
      position: absolute;
      left: -5000px;
      top: -5000px;
      z-index: 5000;
    }
    
    .hi-options button {
      border: 0;
      background-color: #fafafa;
      width: 100%;
      cursor: pointer;
      text-align: left;
      padding-bottom: 5px;
    }
    
    .hi-options button div {
      width: 25px;
      height: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.25);
      margin-left: -6px;
      margin-top: 5px;
      float: left;
    }
    
    .hi-options button span {
      position: relative;
      top: 5px;
      left: 7px;
    }
    
    .hi-options .btn-bottom {
      border-bottom: 1px solid rgba(192, 0, 0, 0.25);
    }
    
    .hi-options button:hover {
      background-color: #c00000;
    }
  </style>
</html>